<!-- 递归 panel -->
<template>
  <div v-for="(item, index) in list"
       :key="index"
       :class="renderParentClass"
       :style="renderParentStyle">
    <slot name="container" :item="item" :extend="extendIndex !== undefined">
    </slot>
    <RecursionPanel v-if="item[child] && item[child].length !== 0"
                    :list="item[child]"
                    :parent-class="renderParentClass"
                    :parent-style="renderParentStyle"
                    :child-class="childClass"
                    :child-style="childStyle"
                    :extendIndex="index"
                    :child="child">
      <template #container="{item, extend}">
        <div :class="childClass" :style="childStyle">
          <slot name="container" :item="item" :extend="extend">
          </slot>
        </div>
      </template>
    </RecursionPanel>
  </div>
</template>

<script lang="ts" setup>
/** JS */
import {ref, watch, defineProps} from 'vue';

const props = defineProps<{
  list: any []
  child: string
  parentClass?: string
  parentStyle?: string
  childClass?: string
  childStyle?: string
  extendIndex?: number
}>();
const list = ref(props.list), renderParentClass = ref(props.parentClass), renderParentStyle = ref(props.parentStyle);
if (props.extendIndex !== undefined) {
  // 如果存在就说明它是递归里的组件，不存在则是一级父组件
  renderParentClass.value = 'recursion--panel--_parent';
  renderParentStyle.value = '';
}
watch(props, (n) => list.value = n.list, {deep: true})
</script>

<style scoped>

</style>
